<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索结果 - Snapan</title>
  <link rel="stylesheet" href="../static/css/index.css">
  <style>
    /* 搜索筛选栏样式 - 与整体风格统一 */
    .search-filters {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      flex-wrap: wrap;
    }

    .filter-item {
      position: relative;
    }

    .filter-btn {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
    }

    .filter-btn:hover {
      background: rgba(255, 255, 255, 1);
      border-color: #667eea;
      color: #667eea;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    }

    /* 搜索建议下拉框 */
    .search-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      z-index: 100;
      max-height: 200px;
      overflow-y: auto;
      display: none;
    }

    .search-suggestions.show {
      display: block;
    }

    .suggestion-item, .history-item {
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      font-size: 14px;
      color: #666;
    }

    .suggestion-item:hover, .history-item:hover {
      background: rgba(102, 126, 234, 0.05);
      color: #667eea;
    }

    .history-label {
      padding: 8px 16px;
      font-size: 12px;
      color: #999;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* 弹框样式 - 统一模态框风格 */
    .filter-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .filter-modal.show {
      display: flex;
      opacity: 1;
    }

    .modal-content {
      background: white;
      border-radius: 16px;
      padding: 24px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      transform: scale(0.9);
      transition: all 0.3s ease;
    }

    .filter-modal.show .modal-content {
      transform: scale(1);
    }

    .modal-header {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      text-align: center;
    }

    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-label {
      font-size: 14px;
      color: #666;
    }

    .form-input {
      padding: 10px 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      font-size: 14px;
      transition: border-color 0.2s ease;
    }

    .form-input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* 标签选择下拉 */
    .tag-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .tag-item {
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tag-item:hover, .tag-item.active {
      background: rgba(102, 126, 234, 0.1);
      border-color: #667eea;
      color: #667eea;
    }

    /* 排序选项样式 */
    .sort-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .sort-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sort-option:hover, .sort-option.active {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.05);
      color: #667eea;
    }

    .sort-radio {
      accent-color: #667eea;
    }

    /* 模态框操作按钮 */
    .modal-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }

    /* 搜索结果统计 */
    .search-stats {
      padding: 12px 24px;
      font-size: 14px;
      color: #666;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .result-count {
      color: #666;
    }

    .export-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .export-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    /* 分页控件 */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 20px 0;
    }

    .page-btn {
      padding: 8px 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      background: white;
      color: #666;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .page-btn:hover {
      border-color: #667eea;
      color: #667eea;
    }

    .page-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: rgba(0, 0, 0, 0.05);
      color: #999;
    }

    .page-btn.disabled:hover {
      border-color: rgba(0, 0, 0, 0.05);
      color: #999;
    }

    .page-number {
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .page-number.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    /* 导出成功提示 */
    .export-success {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      background: white;
      border-radius: 16px;
      padding: 24px;
      width: 90%;
      max-width: 350px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      text-align: center;
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .export-success.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

    .success-icon {
      font-size: 48px;
      color: #4CAF50;
      margin-bottom: 16px;
    }

    .success-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .success-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 24px;
    }

    /* 空结果状态 */
    .empty-result {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      color: #666;
      text-align: center;
    }

    .empty-icon {
      font-size: 64px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-text {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .empty-hint {
      font-size: 14px;
      opacity: 0.7;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .search-filters {
        padding: 12px 16px;
        gap: 8px;
      }

      .filter-btn {
        padding: 6px 12px;
        font-size: 12px;
      }

      .search-stats {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .modal-content {
        padding: 20px;
        max-width: 320px;
      }

      .sort-options {
        grid-template-columns: 1fr;
      }

      .page-btn, .page-number {
        padding: 6px 10px;
        font-size: 12px;
      }
    }

    @media (max-width: 480px) {
      .search-filters {
        justify-content: space-between;
      }

      .filter-item {
        width: 48%;
      }

      .filter-btn {
        width: 100%;
        justify-content: center;
      }

      .export-success {
        padding: 20px;
        max-width: 280px;
      }

      .success-icon {
        font-size: 36px;
      }

      .success-title {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
<!-- 搜索筛选栏 -->
<div class="search-filters">
  <div class="filter-item" style="flex: 1; min-width: 200px;">
    <div class="search-box" style="margin-bottom: 0;">
      <div class="search-icon">🔍</div>
      <input type="text" class="search-input" placeholder="请输入内容、文件名类型..." id="searchInput">
    </div>
    <!-- 搜索建议下拉框 -->
    <div class="search-suggestions" id="searchSuggestions">
      <div class="suggestion-item">2025年项目规划书.docx</div>
      <div class="suggestion-item">季度项目报告.pdf</div>
      <div class="suggestion-item">技术项目需求文档.docx</div>
      <div class="history-label">搜索历史</div>
      <div class="history-item">项目规划</div>
      <div class="history-item">会议录屏</div>
      <div class="history-item">需求文档</div>
    </div>
  </div>
  <div class="filter-item">
    <button class="filter-btn" id="timeRangeBtn">
      <span>📅</span> 时间范围
    </button>
  </div>
  <div class="filter-item">
    <button class="filter-btn" id="fileSizeBtn">
      <span>📏</span> 文件大小
    </button>
  </div>
  <div class="filter-item">
    <button class="filter-btn" id="tagBtn">
      <span>🏷️</span> 标签
    </button>
  </div>
  <div class="filter-item">
    <button class="filter-btn" id="sortBtn">
      <span>🔄</span> 排序
    </button>
  </div>
</div>

<!-- 搜索结果统计 -->
<div class="search-stats">
  <div class="result-count">找到约 <span style="color: #667eea; font-weight: 600;">37</span> 条结果，共 <span style="color: #667eea; font-weight: 600;">4</span> 页</div>
  <button class="export-btn" id="exportBtn">
    <span>📤</span> 导出
  </button>
</div>

<!-- 文件列表 - 与主页面file-list风格一致 -->
<div class="file-list">
  <table class="file-table">
    <thead>
    <tr>
      <th style="width: 40px;">
        <input type="checkbox" class="file-checkbox" id="selectAll">
      </th>
      <th>文件名</th>
      <th style="width: 100px;">大小</th>
      <th style="width: 100px;">类型</th>
      <th style="width: 150px;">修改时间</th>
    </tr>
    </thead>
    <tbody id="fileTableBody">
    <!-- 搜索结果文件列表 -->
    <tr>
      <td>
        <input type="checkbox" class="file-checkbox">
      </td>
      <td>
        <div class="file-item">
          <div class="file-icon document">📄</div>
          <div class="file-name">2025年项目规划书.docx</div>
        </div>
      </td>
      <td><div class="file-size">2.3MB</div></td>
      <td><div class="file-type">Word文档</div></td>
      <td><div class="file-date">2025-08-15 14:30</div></td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="file-checkbox">
      </td>
      <td>
        <div class="file-item">
          <div class="file-icon image">🖼️</div>
          <div class="file-name">团队项目进度图.png</div>
        </div>
      </td>
      <td><div class="file-size">1.8MB</div></td>
      <td><div class="file-type">PNG图片</div></td>
      <td><div class="file-date">2025-08-20 10:15</div></td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="file-checkbox">
      </td>
      <td>
        <div class="file-item">
          <div class="file-icon document">📄</div>
          <div class="file-name">季度项目报告.pdf</div>
        </div>
      </td>
      <td><div class="file-size">3.1MB</div></td>
      <td><div class="file-type">PDF文档</div></td>
      <td><div class="file-date">2025-07-28 16:45</div></td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="file-checkbox">
      </td>
      <td>
        <div class="file-item">
          <div class="file-icon video">🎥</div>
          <div class="file-name">项目评审会议录屏.mp4</div>
        </div>
      </td>
      <td><div class="file-size">124MB</div></td>
      <td><div class="file-type">MP4视频</div></td>
      <td><div class="file-date">2025-08-10 09:30</div></td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="file-checkbox">
      </td>
      <td>
        <div class="file-item">
          <div class="file-icon document">📄</div>
          <div class="file-name">技术项目需求文档.docx</div>
        </div>
      </td>
      <td><div class="file-size">1.5MB</div></td>
      <td><div class="file-type">Word文档</div></td>
      <td><div class="file-date">2025-08-25 11:20</div></td>
    </tr>
    </tbody>
  </table>
</div>

<!-- 分页控件 -->
<div class="pagination">
  <button class="page-btn disabled">上一页</button>
  <div class="page-number active">1</div>
  <div class="page-number">2</div>
  <div class="page-number">3</div>
  <div class="page-number">4</div>
  <button class="page-btn">下一页</button>
</div>

<!-- 时间范围模态框 -->
<div class="filter-modal" id="timeRangeModal">
  <div class="modal-content">
    <div class="modal-header">选择时间范围</div>
    <div class="modal-form">
      <div class="form-group">
        <label class="form-label">开始时间</label>
        <input type="date" class="form-input" id="startTime">
      </div>
      <div class="form-group">
        <label class="form-label">结束时间</label>
        <input type="date" class="form-input" id="endTime">
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn btn-secondary" id="timeRangeCancel">取消</button>
      <button class="btn btn-primary" id="timeRangeConfirm">确认</button>
    </div>
  </div>
</div>

<!-- 文件大小模态框 -->
<div class="filter-modal" id="fileSizeModal">
  <div class="modal-content">
    <div class="modal-header">选择文件大小范围</div>
    <div class="modal-form">
      <div class="form-group">
        <label class="form-label">最小大小 (MB)</label>
        <input type="number" class="form-input" id="minSize" placeholder="0">
      </div>
      <div class="form-group">
        <label class="form-label">最大大小 (MB)</label>
        <input type="number" class="form-input" id="maxSize" placeholder="无限制">
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn btn-secondary" id="fileSizeCancel">取消</button>
      <button class="btn btn-primary" id="fileSizeConfirm">确认</button>
    </div>
  </div>
</div>

<!-- 标签选择模态框 -->
<div class="filter-modal" id="tagModal">
  <div class="modal-content">
    <div class="modal-header">选择标签</div>
    <div class="modal-form">
      <div class="form-group">
        <label class="form-label">可用标签</label>
        <div class="tag-selector">
          <div class="tag-item active">java语法</div>
          <div class="tag-item">算法</div>
          <div class="tag-item">视频</div>
          <div class="tag-item">文档</div>
          <div class="tag-item">图片</div>
          <div class="tag-item">项目规划</div>
          <div class="tag-item">会议记录</div>
          <div class="tag-item">需求分析</div>
        </div>
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn btn-secondary" id="tagCancel">取消</button>
      <button class="btn btn-primary" id="tagConfirm">确认</button>
    </div>
  </div>
</div>

<!-- 排序模态框 -->
<div class="filter-modal" id="sortModal">
  <div class="modal-content">
    <div class="modal-header">选择排序方式</div>
    <div class="modal-form">
      <div class="form-group">
        <label class="form-label">按时间排序</label>
        <div class="sort-options">
          <label class="sort-option">
            <input type="radio" name="timeSort" class="sort-radio" value="asc"> 升序
          </label>
          <label class="sort-option active">
            <input type="radio" name="timeSort" class="sort-radio" value="desc" checked> 降序
          </label>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">按大小排序</label>
        <div class="sort-options">
          <label class="sort-option">
            <input type="radio" name="sizeSort" class="sort-radio" value="asc"> 升序
          </label>
          <label class="sort-option">
            <input type="radio" name="sizeSort" class="sort-radio" value="desc"> 降序
          </label>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">按类型排序</label>
        <div class="sort-options">
          <label class="sort-option active">
            <input type="radio" name="typeSort" class="sort-radio" value="asc" checked> 升序
          </label>
          <label class="sort-option">
            <input type="radio" name="typeSort" class="sort-radio" value="desc"> 降序
          </label>
        </div>
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn btn-secondary" id="sortCancel">取消</button>
      <button class="btn btn-primary" id="sortConfirm">确认</button>
    </div>
  </div>
</div>

<!-- 导出模态框 -->
<div class="filter-modal" id="exportModal">
  <div class="modal-content">
    <div class="modal-header">导出文件设置</div>
    <div class="modal-form">
      <div class="form-group">
        <label class="form-label">导出位置</label>
        <input type="text" class="form-input" id="exportPath" placeholder="默认下载路径" value="C:\用户\下载">
      </div>
      <div class="form-group">
        <label class="form-label">导出格式</label>
        <select class="form-input" id="exportFormat">
          <option value="zip">ZIP压缩包</option>
          <option value="original">原格式分开导出</option>
          <option value="excel">Excel文件列表</option>
        </select>
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn btn-secondary" id="exportCancel">取消</button>
      <button class="btn btn-primary" id="exportConfirm">确认</button>
    </div>
  </div>
</div>

<!-- 导出成功提示 -->
<div class="export-success" id="exportSuccess">
  <div class="success-icon">✅</div>
  <div class="success-title">导出成功</div>
  <div class="success-desc">文件已成功导出到指定路径</div>
  <div class="modal-actions">
    <button class="btn btn-secondary" id="successCancel">取消</button>
    <button class="btn btn-primary" id="successShare">分享</button>
  </div>
</div>

<script>
  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化所有事件监听
    initEventListeners();
  });

  // 初始化事件监听
      function initEventListeners() {
        // 搜索输入框建议显示/隐藏
        const searchInput = document.getElementById('searchInput');
        const searchSuggestions = document.getElementById('searchSuggestions');

        searchInput.addEventListener('focus', function() {
          searchSuggestions.classList.add('show');
        });

        searchInput.addEventListener('blur', function() {
          setTimeout(() => {
            searchSuggestions.classList.remove('show');
          }, 200);
        });

        // 搜索建议/历史点击
        const suggestionItems = document.querySelectorAll('.suggestion-item, .history-item');
        suggestionItems.forEach(item => {
          item.addEventListener('click', function() {
            searchInput.value = this.textContent;
            searchSuggestions.classList.remove('show');
            // 执行搜索逻辑（可根据实际需求扩展）
            alert(`正在搜索: ${this.textContent}`);
          });
        });

        // 模态框显示/隐藏通用函数
        function toggleModal(btnId, modalId, cancelId, confirmId, confirmCallback) {
          const btn = document.getElementById(btnId);
          const modal = document.getElementById(modalId);
          const cancelBtn = document.getElementById(cancelId);
          const confirmBtn = document.getElementById(confirmId);

          // 显示模态框
          btn.addEventListener('click', function() {
        modal.classList.add('show');
        document.body.style.overflow = 'hidden';
      });

      // 关闭模态框
      function closeModal() {
        modal.classList.remove('show');
        document.body.style.overflow = 'auto';
      }

      cancelBtn.addEventListener('click', closeModal);

      // 确认按钮回调
      confirmBtn.addEventListener('click', function() {
        if (confirmCallback) {
          confirmCallback();
        }
        closeModal();
      });

      // 点击模态框外部关闭
      modal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeModal();
        }
      });
    }

    // 时间范围模态框
    toggleModal(
            'timeRangeBtn',
            'timeRangeModal',
            'timeRangeCancel',
            'timeRangeConfirm',
            function() {
              const startTime = document.getElementById('startTime').value;
              const endTime = document.getElementById('endTime').value;
              if (startTime && endTime && new Date(startTime) > new Date(endTime)) {
                alert('开始时间不能晚于结束时间');
                return false;
              }
              alert(`时间范围筛选: ${startTime || '不限'} 至 ${endTime || '不限'}`);
            }
    );

    // 文件大小模态框
    toggleModal(
            'fileSizeBtn',
            'fileSizeModal',
            'fileSizeCancel',
            'fileSizeConfirm',
            function() {
              const minSize = document.getElementById('minSize').value || 0;
              const maxSize = document.getElementById('maxSize').value || '无限制';
              if (maxSize !== '无限制' && parseInt(minSize) > parseInt(maxSize)) {
                alert('最小大小不能大于最大大小');
                return false;
              }
              alert(`文件大小筛选: ${minSize}MB 至 ${maxSize}`);
            }
    );

    // 标签模态框
    toggleModal(
            'tagBtn',
            'tagModal',
            'tagCancel',
            'tagConfirm',
            function() {
              const activeTags = Array.from(document.querySelectorAll('.tag-item.active'))
                      .map(tag => tag.textContent);
              alert(`选中标签: ${activeTags.join(', ')}`);
            }
    );

    // 标签选择
    const tagItems = document.querySelectorAll('.tag-item');
    tagItems.forEach(item => {
      item.addEventListener('click', function() {
        this.classList.toggle('active');
      });
    });

    // 排序模态框
    toggleModal(
            'sortBtn',
            'sortModal',
            'sortCancel',
            'sortConfirm',
            function() {
              let sortType = '';
              let sortOrder = '';

              // 时间排序
              const timeSort = document.querySelector('input[name="timeSort"]:checked');
              // 大小排序
              const sizeSort = document.querySelector('input[name="sizeSort"]:checked');
              // 类型排序
              const typeSort = document.querySelector('input[name="typeSort"]:checked');

              if (timeSort) {
                sortType = '时间';
                sortOrder = timeSort.value === 'asc' ? '升序' : '降序';
              } else if (sizeSort) {
                sortType = '大小';
                sortOrder = sizeSort.value === 'asc' ? '升序' : '降序';
              } else if (typeSort) {
                sortType = '类型';
                sortOrder = typeSort.value === 'asc' ? '升序' : '降序';
              }

              alert(`排序方式: 按${sortType}${sortOrder}`);
            }
    );

    // 排序选项选择
    const sortOptions = document.querySelectorAll('.sort-option');
    sortOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 清除同组其他选项的选中状态
        const radio = this.querySelector('.sort-radio');
        const name = radio.getAttribute('name');

        document.querySelectorAll(`input[name="${name}"]`).forEach(radio => {
          radio.closest('.sort-option').classList.remove('active');
        });

        // 设置当前选项为选中状态
        this.classList.add('active');
        radio.checked = true;
      });
    });

    // 导出模态框
    toggleModal(
            'exportBtn',
            'exportModal',
            'exportCancel',
            'exportConfirm',
            function() {
              const exportPath = document.getElementById('exportPath').value;
              const exportFormat = document.getElementById('exportFormat').options[document.getElementById('exportFormat').selectedIndex].text;

              // 显示导出成功提示
              document.getElementById('exportSuccess').classList.add('show');
              console.log(`导出设置: 路径=${exportPath}, 格式=${exportFormat}`);
            }
    );

    // 导出成功提示关闭
    document.getElementById('successCancel').addEventListener('click', function() {
      document.getElementById('exportSuccess').classList.remove('show');
    });

    // 分享按钮（示例）
    document.getElementById('successShare').addEventListener('click', function() {
      alert('分享功能已触发（实际功能需扩展）');
      document.getElementById('exportSuccess').classList.remove('show');
    });

    // 全选功能
    const selectAll = document.getElementById('selectAll');
    const fileCheckboxes = document.querySelectorAll('.file-checkbox:not(#selectAll)');

    selectAll.addEventListener('change', function() {
      fileCheckboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
      });
    });

    // 分页功能
    const pageNumbers = document.querySelectorAll('.page-number');
    const prevBtn = document.querySelector('.pagination .page-btn:first-child');
    const nextBtn = document.querySelector('.pagination .page-btn:last-child');

    pageNumbers.forEach(number => {
      number.addEventListener('click', function() {
        pageNumbers.forEach(num => num.classList.remove('active'));
        this.classList.add('active');

        // 更新分页按钮状态
        const currentPage = parseInt(this.textContent);
        prevBtn.classList.toggle('disabled', currentPage === 1);
        nextBtn.classList.toggle('disabled', currentPage === pageNumbers.length);
      });
    });

    // 上一页/下一页
    prevBtn.addEventListener('click', function() {
      if (!this.classList.contains('disabled')) {
        const currentActive = document.querySelector('.page-number.active');
        const prevPage = currentActive.previousElementSibling;
        if (prevPage) {
          prevPage.click();
        }
      }
    });

    nextBtn.addEventListener('click', function() {
      if (!this.classList.contains('disabled')) {
        const currentActive = document.querySelector('.page-number.active');
        const nextPage = currentActive.nextElementSibling;
        if (nextPage) {
          nextPage.click();
        }
      }
    });
  }
</script>
</body>
</html>